<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQ之自定义动画</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <button class="start">开始动画</button>
    <button class="end">终止动画</button>
    <div class="box"></div>

    <script src="./js/jquery.3.5.1.js"></script>
    <script>
        $(function(){
            $('.start').on('click',function(){
                $('.box')
                .animate({
                    left:200
                })
                .animate({
                    top:200
                })
                /* 
                    冷知识点三：延迟delay(time)
                */
                .delay(3000)
                .animate({
                    left:0
                })
                .animate({
                    top:100
                })
                /* 
                    冷知识点一：队列方法：把同步类内部函数插入到动画队列 
                    因为css样式变动是同步操作，动画时异步操作
                */
                .queue(function(next){
                    $(this).css({
                        backgroundColor:'pink'
                    })
                    next();
                })
                .animate({
                    width:200,
                    height:200
                })
                /* 
                    冷知识点二：animate执行完毕后会自动调用下一个，而queue不会，故需要传自定义参数
                */
            })

            $('.end').on('click',function(){
                // 清空队列，不完成当前动画
                $('.box').stop(true,false)
            })
        })
    </script>
</body>
</html>